import { getArticleListByUserId } from '@/services/article';
import styles from './index.less';
import { useRequest } from 'ahooks';
import { useParams } from '@umijs/max';
import SpinBox from '@/components/SpinBox';


export const ArticleItem = ({ id, title, images, summary, views, likes }) => {
    return <div className={styles.container} onClick={() => {
        window.open(`/view/${id}`)
    }}>
        <div className={styles.left}>
            <div className={styles.title}>{title}</div>
            <div className={styles.desc}>{summary}</div>
            <div className={styles.otherContainer}>
                <div className={styles.metaContainer}>
                    <span className={styles.numberInfo} ><i className='iconfont icon-browse' />{views}</span>
                    <span className={styles.numberInfo} ><i className='iconfont icon-a-Property1youbangzhuProperty2weixuanzhong' />{likes}</span>
                </div>
                <div className={styles.tagContainer}>

                </div>
            </div>
        </div>
        {
            !!images && <img className={styles.image} src={images} alt="" />
        }
    </div>
}
export default () => {
    const { id } = useParams();
    const { data: articleList, loading } = useRequest(getArticleListByUserId, {
        defaultParams: [id],
    })
    return <>
        <SpinBox loading={loading}>
            {
                articleList?.map((item) => <ArticleItem {...item}/>)
            }
        </SpinBox>


    </>
}